<template lang="pug">
	.login-by-verification-wrap
		.verification-title 请输入短信验证码
		.verification-box(@click="focusInput")
			.verification-1
				div {{inputtextArray[0]}}
			.verification-2
				div {{inputtextArray[1]}}
			.verification-3
				div {{inputtextArray[2]}}
			.verification-4
				div {{inputtextArray[3]}}
			.verification-active(:animation="animationData")
		send-code(codeType="3" time="120" :phone="phone" text="重新发送" ref="sCode")
		input.ver-input(type="number" v-model='inputtext' :focus="isInputFocus" @input="returnVerification" maxlength="4")

</template>

<script>
import sendCode from '@/components/send-code'
export default {
	data() {
		return {
			isInputFocus: false,
			inputtext: '',
			animationData: '',
			activeFocus: false,
			phone: ''
		}
	},
	computed: {
		inputtextArray() {
			let str = this.inputtext.toString()
			return str.split('')
		}
	},
	created() {},
	onLoad() {
		Object.assign(this.$data, this.$options.data())
	},
	mounted() {
		this.animation = this.wx.createAnimation({
			duration: 200,
			timingFunction: 'linear'
		})
		this.phone = this.$route.query.phone.toString()
		this.$refs.sCode.sendCode()
	},
	onPullDownRefresh() {},
	onPageScroll(e) {},
	methods: {
		focusInput() {
			this.isInputFocus = !this.isInputFocus
		},
		returnVerification() {
			let length = this.inputtext.toString().length
			let left = 25 * length
			if (left < 0) left = 0
			if (left >= 75) left = 75
			this.animationData = this.animation
				.left(left + '%')
				.step()
				.export()
			if (length >= 4) {
				this.login()
			}
		},
		login() {
			this.wx.showLoading({
				title: '加载中'
			})
			this.api.jtApi
				.login({
					login_name: '',
					login_password: '',
					phone: this.phone,
					ver_code: this.inputtext.toString(),
					idcard: '',
					mac_type: '',
					mac_id: '',
					type: '1'
				})
				.then(data => {
					this.wx.hideLoading()
					if (data.ret_code === '0') {
						this.wx.showToast({
							title: '登录成功'
						})
						this.wx.setStorage({
							key: 'userInfo',
							data: {
								memberNum: data.member_num,
								accessToken: data.access_token,
								phone: data.phone
							}
						})
						setTimeout(() => {
							this.$router.push({
								path: '/views/healthCard/index'
							})
						}, 1000)
					} else {
						this.wx.showToast({
							title: data.ret_info,
							icon: 'none'
						})
					}
				})
				.catch(() => {})
		}
	},
	components: {
		sendCode
	}
}
</script>

<style lang="stylus">
	page
		background-color white!important
	.login-by-verification-wrap
		.verification-title
			color blackFontColor4C
			margin-top 200px
			text-align center
			font-size 26px
			line-height 36px
		.verification-box
			display flex
			justify-content space-between
			width 560px
			margin 0 auto
			margin-top 40px
			position relative
			overflow hidden
			box-sizing border-box
			>div
				box-sizing border-box
				margin 20px
				width 100px
				height 100px
				border 1px solid grayBorder
				border-radius 10px
				display flex
				justify-content center
				align-items center
				font-size 40px
				font-weight 500
			.verification-active
				position absolute
				top 0
				left 0
				border 1px solid themeColor
				box-shadow:0 0 10px 0 #b2ebff
		.ver-input
			width 0
			height 0
</style>
